<!-- Based on Build a Responsive Website by Brad Traversy (2020)
see: https://www.youtube.com/watch?v=p0bGHP-PXD4 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="utilities.css" />
<link rel="stylesheet" href="style.css" />
<title>Loruki | Cloud Hosting For Everyone</title>
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="container flex">
<h1 class="logo">Loruki.</h1>
<nav>
<ul>
<li><a href="#demo">Demo</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#docs">Docs</a></li>
</ul>
</nav>
</div>
</div>
<!-- showcase -->
<section class="showcase" id="demo">
<div class="container grid">
<div class="showcase-text">
<h1>Easier Deployment</h1>
<p>
Deploy web apps of all kinds, from large scale enterprise APIs to
static websites for individuals. Fill out the form to try a demo of
our platform
</p>
<a href="#features" class="btn btn-outline">Learn More</a>
</div>
<div class="showcase-form card">
<h2>Request a Demo</h2>
<form onsubmit="event.preventDefault()">
<div class="form-control">
<input type="text" name="name" placeholder="Name" required />
</div>
<div class="form-control">
<input
type="text"
name="company"
placeholder="Company Name"
required
/>
</div>
<div class="form-control">
<input type="email" name="email" placeholder="Email" required />
</div>
<input type="submit" value="Send" class="btn btn-primary" />
</form>
</div>
</div>
</section>
<!-- stats -->
<section class="stats">
<div class="container">
<h3 class="stats-heading text-center my-1">
Welcome to the best platform for building applications of all types
with modern architecture and scaling
</h3>
<div class="grid grid-3 text-center my-4">
<div>
<i class="fas fa-server fa-3x"></i>
<h3>10,349,405</h3>
<p class="text-secondary">Deployments</p>
</div>
<div>
<i class="fas fa-upload fa-3x"></i>
<h3>987 TB</h3>
<p class="text-secondary">Published</p>
</div>
<div>
<i class="fas fa-project-diagram fa-3x"></i>
<h3>2,343,265</h3>
<p class="text-secondary">Projects</p>
</div>
</div>
</div>
</section>
<!-- cli -->
<section class="cli">
<div class="container grid">
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/cli.png?raw=true"
alt=""
/>
<div class="card">
<h3>Easy to use, cross platform CLI</h3>
</div>
<div class="card">
<h3>Deploy in seconds</h3>
</div>
</div>
</section>
<!-- cloud -->
<section class="cloud my-2 py-2">
<div class="container grid bg-secondary">
<div class="text-center">
<h2 class="lg">Extreme Cloud Hosting</h2>
<p class="lead my-1">
Cloud hosting like you've never seen. Fast, efficient and scalable
</p>
<a href="#features" class="btn btn-dark">Read More</a>
</div>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/cloud.png?raw=true"
alt=""
/>
</div>
</section>
<!-- languages -->
<section class="languages">
<h2 class="md text-center my-2">Supported Languages</h2>
<div class="container flex">
<div class="card">
<h4>Node.js</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/node.png?raw=true"
alt=""
/>
</div>
<div class="card">
<h4>Python</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/python.png?raw=true"
alt=""
/>
</div>
<div class="card">
<h4>C#</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/csharp.png?raw=true"
alt=""
/>
</div>
<div class="card">
<h4>Ruby</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/ruby.png?raw=true"
alt=""
/>
</div>
<div class="card">
<h4>PHP</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/php.png?raw=true"
alt=""
/>
</div>
<div class="card">
<h4>Scala</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/scala.png?raw=true"
alt=""
/>
</div>
<div class="card">
<h4>Clojure</h4>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/clojure.png?raw=true"
alt=""
/>
</div>
</div>
</section>
<!-- features -->
<section id="features">
<!-- head -->
<div class="features-head bg-primary py-3">
<div class="container grid">
<div>
<h1 class="xl">Features</h1>
<p class="lead">
Check out the features of Loruki that separate us from the
competition
</p>
</div>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/server.png?raw=true"
alt=""
/>
</div>
</div>
<!-- sub head -->
<div class="features-sub-head bg-light py-3">
<div class="container grid">
<div>
<h1 class="md">The Loruki Platform</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor
cupiditate dignissimos temporibus perspiciatis quae! Suscipit qui,
consectetur ea consequatur, doloribus repellendus quasi, aut
corporis nam alias culpa. Nostrum, inventore accusantium!
</p>
</div>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/server2.png?raw=true"
alt=""
/>
</div>
</div>
<!-- main features -->
<div class="features-main my-2">
<div class="container grid grid-3">
<div class="card flex">
<i class="fas fa-server fa-3x"></i>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
nemo saepe corrupti et dolorem voluptate at, nostrum rem
voluptatem ab alias quia molestiae ea, libero nihil deserunt.
Molestias, eum? Necessitatibus!
</p>
</div>
<div class="card flex">
<i class="fas fa-network-wired fa-3x"></i>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
recusandae perferendis culpa, reiciendis a itaque debitis qui vel
dignissimos ipsum!
</p>
</div>
<div class="card flex">
<i class="fas fa-laptop-code fa-3x"></i>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
magnam.
</p>
</div>
<div class="card flex">
<i class="fas fa-database fa-3x"></i>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, a!
</p>
</div>
<div class="card flex">
<i class="fas fa-power-off fa-3x"></i>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
magnam.
</p>
</div>
<div class="card flex">
<i class="fas fa-upload fa-3x"></i>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
magnam.
</p>
</div>
</div>
</div>
</section>
<!-- docs -->
<section id="docs">
<!-- head -->
<div class="docs-head bg-primary py-3">
<div class="container grid">
<div>
<h1 class="xl">Docs</h1>
<p class="lead">Learn how to work with the Loruki platform</p>
</div>
<img
src="https://github.com/bradtraversy/loruki-website/blob/master/images/docs.png?raw=true"
alt=""
/>
</div>
</div>
<!-- main docs -->
<div class="docs-main my-4">
<div class="container grid">
<div class="card bg-light p-3">
<h3 class="my-2">Essentials</h3>
<nav>
<ul>
<li><a class="text-primary" href="#">Introduction</a></li>
<li><a href="#">About Loruki</a></li>
<li><a href="#">Installation</a></li>
</ul>
</nav>
<h3 class="my-2">Deployment</h3>
<nav>
<ul>
<li><a href="#">Setting up a container</a></li>
<li><a href="#">Using the CLI</a></li>
<li><a href="#">Managing resources</a></li>
<li><a href="#">Upgrade & downgrade</a></li>
</ul>
</nav>
</div>
<div class="card">
<h2>Introduction</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Distinctio illo facere perferendis laborum? Similique recusandae
incidunt eos dolorum aliquam ipsam unde perspiciatis laudantium
totam quam laborum velit, at maxime minus?
</p>
<div class="alert alert-success">
<i class="fas fa-info"></i> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quae, animi?
</div>
<h3>Lorem, ipsum dolor.</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima
totam magni eius vitae velit id, atque veritatis! At, vero porro.
</p>
<a href="#" class="btn btn-primary">Install CLI</a>
<h3>Requirements</h3>
<ul>
<li>Windows 10, Mac OSX, Linux</li>
<li>Node.js v14 or higher</li>
</ul>
<h3>Install</h3>
<p>Mac (Homebrew)</p>
<pre><code>$ brew install loruki-cli</code></pre>
<p>NPM</p>
<pre><code>$ npm install loruki-cli</code></pre>
<p>Yarn</p>
<pre><code>$ yarn install loruki-cli</code></pre>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="footer bg-dark py-5">
<div class="container grid grid-3">
<div>
<h1>Loruki</h1>
<p>
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
</p>
</div>
<nav>
<ul>
<li><a href="#demo">Demo</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#docs">Docs</a></li>
</ul>
</nav>
<div class="social">
<a href="#"><i class="fab fa-github fa-2x"></i></a>
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
</div>
</div>
</footer>
</body>
</html>